<template>
    <div style="height: 100%">
        <el-divider content-position="center"><span
                style="font-size: 17px;color: #0800ff;font-weight:bold">防疫物资管理</span>
        </el-divider>
        <div class="divstyle">
            <el-card class="box-card">
                <el-table stripe border :data="AllGoods.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                    <el-table-column label="物资id" prop="goodsid" width="100" align="center"></el-table-column>
                    <el-table-column label="物资名称" prop="goodsname" align="center"></el-table-column>
                    <el-table-column label="物资数量" prop="num" align="center"></el-table-column>
                    <el-table-column label="物资描述" prop="des" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="dialogOpen(scope.row.goodsid)">修改数量
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="divstyle">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   small
                                   background
                                   :page-sizes="[4,8,12]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="AllGoods.length">
                    </el-pagination>
                </div>
            </el-card>
        </div>

        <el-dialog width="300px" title="请输入数量" :visible.sync="dialogFormVisible" center>
            <div class="InputNumber">
                <el-input-number  v-model="goodsInfo.num" label="描述文字"></el-input-number>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateGoodsNum">确 定</el-button>
            </div>
        </el-dialog>



        <el-divider content-position="center"><span
                style="font-size: 17px;color: #0800ff;font-weight:bold">物资申请记录</span>
        </el-divider>
        <div class="divstyle">
            <el-card class="box-card">

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input v-model="searchInfo" placeholder="请输入用户名进行查询" clearable>
                            <el-button slot="append" icon="el-icon-search" @click="searchRecordByUser"></el-button>
                        </el-input>
                    </el-col>
                </el-row>

                <el-table stripe border :data="AllRecord.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)">
                    <el-table-column label="申领人" prop="uname" align="center"></el-table-column>
                    <el-table-column label="申领物品" prop="goodsname" align="center"></el-table-column>
                    <el-table-column label="申领时间" prop="recordtime" align="center"></el-table-column>
                    <el-table-column label="申领数量" prop="num" align="center"></el-table-column>
                </el-table>
                <div class="divstyle">
                    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                                   :current-page="currentPage1"
                                   small
                                   background
                                   :page-sizes="[5,10,20,100]" :page-size="pageSize1"
                                   layout="total, sizes, prev, pager, next, jumper" :total="AllRecord.length">
                    </el-pagination>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
                AllGoods: [],
                currentPage: 1, // 当前页码
                pageSize: 4,// 每页的数据条数
                goodsInfo:{
                    id:"",
                    num:""
                },
                AllRecord:[],
                currentPage1: 1,
                pageSize1: 5,
                searchInfo:'',
            };
        },
        created() {
            this.getAllGoods()
            this.getAllRecord()
        },
        methods: {
            async getAllGoods() {
                const {data: res} = await this.$http.get("getAllGoods");
                this.AllGoods = res.allGoods;
                console.log(this.AllGoods)
            },
            dialogOpen(row){
                this.goodsInfo.id = row;
                this.dialogFormVisible = true;
            },
            async updateGoodsNum(){
                console.log(this.goodsInfo)
                const { data:res } = await this.$http.post('updateGoodsNum',this.goodsInfo)
                if(res==="ok"){
                    this.$message.success("修改成功");
                    this.goodsInfo.num = 0;
                    await this.getAllGoods();
                }else{this.$message.error("修改失败")}
                this.dialogFormVisible = false;
            },


            async getAllRecord(){
                const { data:res } = await this.$http.get('getAllRecord')
                this.AllRecord = res;
            },

            async searchRecordByUser() {
                console.log(this.searchInfo)
                const {data: res} = await this.$http.get("searchRecordByUser?uname=" + this.searchInfo)
                this.AllRecord = res;
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            /* 分页2 */
            handleSizeChange1(val) {
                this.currentPage1 = 1;
                this.pageSize1 = val;
            },
            handleCurrentChange1(val) {
                this.currentPage1 = val;
            },
        }
    }
</script>

<style scoped>
    /*分割线样式*/
    .el-divider--horizontal {
        margin: 8px 0;
        background: 0 0;
        border-top: 1px dashed #0979ea;
    }

    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box-card {
        width: 90%;
        height: 100%;
    }
    .InputNumber{
        display:flex;
        align-items:center;
        justify-content:center;
    }
</style>